<template>
    <div class="adminHouse">
      <div class="title">
        <h2>房源管理</h2>
        <el-button  v-if="role ==='房东'"
                    class="btnNewHouse"
                    @click="()=>{this.$router.push('/index/admin/release')}">
          发布新房源
        </el-button>
      </div>
      <div class="houses">
        <div v-for="item in currentList" :key="item.id" class="item">
          <div class="houseSet">
            <img :src="getFirstImage(item.imgUrl)"  @click="role === '管理员' && item.status === -2 ? showReviewDialog(item) : null">
            <div class="houseTitle">
              <h2>{{ item.title }}</h2>
              <span><i class="el-icon-location-outline">{{ item.city + item.area + item.address }}</i></span>
            </div>
            <div class="control">
              <el-tooltip v-if="role === '房东'" content="详情" effect="dark" placement="top">
                <el-button class="btn" icon="el-icon-setting" @click="showDetail(item.id)"></el-button>
              </el-tooltip>
              <el-tooltip v-if="item.status !== 1&&role==='房东'" content="编辑" effect="dark" placement="top">
                <el-button class="btn" icon="el-icon-edit" @click="editDetail(item.id)"></el-button>
              </el-tooltip>
              <el-tooltip v-if="role === '房东'" :content="item.viewCount+'次浏览'" effect="dark" placement="top">
                <el-button class="btn" icon="el-icon-view" ></el-button>
              </el-tooltip>
              <el-tooltip v-if="role==='房东' && item.status === -1" content="上架" effect="dark" placement="top">
                <el-button class="btn" icon="el-icon-upload2" @click="changeHouseStatus(item.id,-2)"></el-button>
              </el-tooltip>
              <el-tooltip v-if="item.status === 0&&role==='房东'" content="下架" effect="dark" placement="top">
                <el-button class="btn" icon="el-icon-download" @click="changeHouseStatus(item.id,-1)"></el-button>
              </el-tooltip>
              <el-tooltip v-if="item.status ===-1&&role==='房东'" content="删除" effect="dark" placement="top">
                <el-button class="btn" icon="el-icon-delete"></el-button>
              </el-tooltip>
                <el-button v-if="role === '管理员' && item.status === -2" class="btn" icon="iconfont icon-Subtraction"
                           style="width: 160px;color: #20ab6c" @click="changeHouseStatus(item.id,0)">
                    通过审核
                </el-button>
                <el-button v-if="role === '管理员' && item.status === -2" class="btn" icon="iconfont icon-cuowu11"
                           style="width: 160px;color: #e91e65" @click="changeHouseStatus(item.id,-3)">
                    拒绝审核
                </el-button>
            </div>
            <div v-if="role === '房东'" :class="['status',getStatusType(item.status)]">{{getStatusText(item.status)}}</div>
            <div v-if="role === '管理员'" :class="['status',getStatusType2(item.status)]">{{getStatusText2(item.status)}}</div>
          </div>
        </div>
      </div>

      <!-- 新增：审核弹窗 -->
      <el-dialog v-model="selectedHouse" :visible.sync="dialogVisible" title="房屋详细信息" width="60%">
        <div  class="review-content">
          <div class="review-info">
            <p><strong>房屋标题：</strong>{{ selectedHouse.title }}</p>
            <p><strong>房屋地址：</strong>{{ selectedHouse.city+selectedHouse.area+selectedHouse.address }}</p>
            <p><strong>房屋租金：</strong>¥{{ selectedHouse.monthRent }} /月</p>
            <p><strong>房屋户型：</strong>{{ selectedHouse.bedroom }}卧室 {{ selectedHouse.parlour }}客厅 {{ selectedHouse.toilet }}卫生间</p>
            <p><strong>房屋面积：</strong>{{ selectedHouse.capacity }}㎡</p>
            <p><strong>租赁类型：</strong>{{ selectedHouse.rentType }}</p>
<!--            <p><strong>房东姓名：</strong>{{ landlord.name }}</p>-->
<!--            <p><strong>房东身份证号：</strong>{{ landlord.idCard }}</p>-->
          </div>
        </div>
      </el-dialog>
      <div class="page">
        <el-pagination :current-page.sync="pageNum"
                       :page-size="pageSize"
                       :page-sizes="[6, 9, 12]"
                       :total="allList.length"
                       layout="total, sizes, prev, pager, next"
                       @current-change="handlePage"
                       @size-change="handleSizeChange"
        >
        </el-pagination>
      </div>
    </div>
</template>

<script>
import axios from "axios";

export default {
  name: "AdminHouse",
  mounted() {
    this.getHouseList()
    this.getRole()
  },
  data() {
    return {
      dialogVisible: false, // 控制弹窗是否显示
      // 当前选中的房屋信息
      selectedHouse: {
        title: '',
        address: '',
        rentType: '',
        area: '',
        city:'',
        rent: '',
        bedroom: '',
        parlour: '',
        toilet:'',
        capacity: '',
        monthRent:'',
      },
      landlord:{
        name: '陈红',
        idCard: '511120198410011415'
      },
      house:{
        status: ''
      },
      currentPage: 1,
      allList: [],
      currentList:[],
      list: [],
      pageSize: 6,
      pageNum: 1,
      role:''
    }
  },
  methods: {

    // 显示审核弹窗
    showReviewDialog(house) {
      //console.log("当前房屋的id：",house.id)
      this.dialogVisible = true;
      this.selectedHouse = house;
    },

    handleSizeChange(size) {
      this.pageSize = size;
      this.pageNum = 1; // 重置到第一页
      this.handlePage(1,size)
    },

    handlePage(page) {
      this.pageNum = page;
      const start = (page - 1) * this.pageSize;
      const end = page * this.pageSize;
      this.currentList = this.allList.slice(start, end);
    },


    getFirstImage(imgUrl){
      try {
        // 尝试解析JSON格式（兼容数组存储）
        const images = typeof imgUrl === 'string' ? JSON.parse(imgUrl) : imgUrl;
        return images?.[0]; // 返回首图或默认图
      } catch (e) {
        // 处理普通字符串格式（兼容旧数据）
        return imgUrl;
      }
    },

    //点击详情时跳转到房源详情界面
    showDetail(id){
      this.$router.push('/index/houseDetail/'+id)
    },
    //房东编辑时跳转到编辑页面
    editDetail(id){
      this.$router.push({path:'/index/admin/release/', query : { id : id } })
    },
    //房东操作房源时更改房源的状态
    changeHouseStatus(id,status){
      console.log(id,status)
      axios({
        url: "http://localhost:8090/house/status",
        method: 'put',
        data:{
          id:id,
          status:status
        }
      }).then(res => {
        if (res.code === '200') {
          this.$message.success("操作成功！")
          this.getHouseList()
        }
      })
    },
    //得到房屋列表
    getHouseList() {
      axios({
        url: "http://localhost:8090/house/list",
        method: 'get',
      }).then(res => {
        if (res.code === '200') {
          this.allList = res.data;
          this.handlePage(1)
        }
      })
    },
    getRole(){
      axios({
        url:"http://localhost:8090/user/getUserRole",
        methods: 'get'
      }).then(res=>{
        if (res.code === '200'){
          this.role = res.data
        }else{
          this.$message.error(res.msg)
        }
      })
    },
    //房东显示时的状态class
    getStatusType(status) {
      switch (status) {
        case 0:
          return 'status1';
        case 1:
          return 'status2';
        case -1:
          return 'status3';
        case -2:
          return 'status4';
        case -3:
          return 'status5';
        default:
          return 'status1';
      }
    },
    //房东显示时的status对应的文本
    getStatusText(status) {
      switch (status) {
        case 0:
          return '未租出';
        case 1:
          return '已租出';
        case -1:
          return '已下架';
        case -2:
          return '待审核';
        case -3:
          return '审核不通过';
        default:
          return '未知状态';
      }
    },
    //管理员显示时的状态class
    getStatusType2(status) {
      switch (status) {
        case 0:
          return 'status2';
        case -2:
          return 'status4';
        case -3:
          return 'status3';
        case 1:
          return 'status3';
        default:
          return 'status1';
      }
    },
    //管理员显示时的status对应的文本
    getStatusText2(status) {
      switch (status) {
        case 0:
          return '审核通过';
        case -2:
          return '待审核';
        case -3:
          return '审核不通过';
        case 1:
          return '已租出';
        default:
          return '未知状态';
      }
    },

  },
}
</script>

<style scoped>
.adminHouse{
  width: 1290px;
  min-height: 800px;
  background-color: white;
  padding: 10px 30px;
}

.title{
  display: flex;
}
.title h2{
  font-weight: 600;
  justify-content: center;
  line-height: 10px;
}

.btnNewHouse{
  margin-left: 15px;
  margin-top: 5px;
  background-color: #4760ff;
  border: none;
  color: white;
  font-weight: 600;
  height: 38px;
}

.btnNewHouse:hover{
  background-color: #4760ff;
  color: white;
  opacity: 0.9;
}

.houses{
  display: flex;
  flex-wrap: wrap;
}

.houses .item{
  margin-right: 50px;
  margin-bottom: 20px;
}

.houseSet{
  width: 350px;
  height: 400px;
  box-shadow: 0 2px 4px rgba(0,0,0,.12), 0 0 6px rgba(0,0,0,.04);
  padding: 15px;
  border-radius: 15px;
  position: relative;
}

img{
  width: 100%;
  height: 250px;
  border-radius: 10px;
}

.houseTitle h2{
  font-size: 20px;
  font-weight: 600;
  margin-top: 10px;
  line-height: 10px;
}

.houseTitle span{
  font-size:15px;
  color: #999;
  border-bottom: 2px solid #eee;
  width: 90%;
  padding-bottom: 5px;
  position: absolute;
  bottom: 60px;
  left: 20px;
}

.control{
  display: flex;
  position: absolute;
  bottom: 10px;
  left: 20px;
}

.btn{
  background-color: #eee;
}

.status{
  position: absolute;
  top: 30px;
  left: 30px;
  padding: 5px 10px;
  color: #fff;
  border-radius: 5px;
}
.page{
  display: flex;
  justify-content: center;
}
.status1 {
  background-color: black;
}

.status2 {
  background-color: #20ab6c;
}

.status3 {
  background-color: #e91e65;
}

.status4 {
  background-color: #f0ad4e;
}

.status5 {
  background-color: #d9534f;
}
</style>